<template>
  <div class="custom-el-plus main-container">
    <div class="left-sidebar">
      <div class="real-Metrics-box">
        <titleComp titleName="实时指标概览"></titleComp>
        <div class="real-box">
          <div
            class="metrics-item"
            v-for="(item, index) in state.realTimeMetricsData"
            :key="index"
          >
            <div class="split-line" v-show="index != 0"></div>
            <div class="metrics-name-num">
              <div class="metrics-name-icon">
                <span
                  class="metrics-icon"
                  :style="{ backgroundColor: item.color }"
                ></span>
                <span class="metrics-name">{{ item.title }}</span>
              </div>
              <div class="metrics-num-unit">
                <div class="metrics-num">{{ item.num?.toLocaleString() }}</div>
                <div class="metrics-split" v-show="item.totalNum">/</div>
                <div class="metrics-total-num" v-show="item.totalNum">
                  {{ item.totalNum?.toLocaleString() }}
                </div>
                <div class="metrics-unit">个</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alarm-type-box">
        <titleComp titleName="今日报警类型概览"></titleComp>
        <div class="alarm-pie-chart">
          <GeneralChart :option="alarmTypePieOption"></GeneralChart>
        </div>
      </div>
      <div class="alarm-rank-box">
        <titleComp titleName="报警总数排名"></titleComp>
        <div class="alarm-rank-table-box">
          <el-table
            :data="state.alarmTotalNumRank"
            style="width: 100%"
            :max-height="370"
            class="style-table"
          >
            <el-table-column
              type="index"
              :index="getIndex"
              label="序号"
              width="80"
            />
            <el-table-column
              prop="address"
              label="位置"
              width="250"
              show-overflow-tooltip
            />
            <el-table-column prop="alarmCountToday" label="今日报警总数" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="right-sidebar">
      <div class="daliy-alarm-box">
        <titleComp titleName="今日报警情况"></titleComp>
        <div class="daliy-alarm-line-chart">
          <GeneralChart :option="daliyAlarmLineOption"></GeneralChart>
        </div>
      </div>
      <div class="last-week-alarm-box">
        <titleComp titleName="近七日报警情况"></titleComp>
        <div class="lastweek-alarm-line-chart">
          <GeneralChart :option="lastWeekAlarmLineOption"></GeneralChart>
        </div>
      </div>
      <div class="alarm-list-box">
        <titleComp titleName="事件列表">
          <div style="margin-left: auto; margin-right: 0.512vw;" class="custom-select-input">
            <el-select
              v-model="state.alarmTypeValue"
              placeholder="全部"
              size="small"
              clearable
              :value-on-clear="null"
              style="width: 120px; margin-left: auto"
              popper-class="custom-query-select"
              @change="changeSelectAlarmType"
            >
              <el-option
                v-for="item in state.eventType"
                :key="item.pkId"
                :label="item.alarmType"
                :value="item.pkId"
              />
            </el-select>
          </div>
        </titleComp>
        <div class="alarm-list-table-box">
          <el-table
            :data="state.eventList"
            style="width: 100%"
            :max-height="280"
            class="style-table alarm-table"
            :row-class-name="tableRowClassName"
            highlight-current-row
            @row-click="selectRow"
          >
            <el-table-column prop="alarmTypeName" label="事件" />
            <el-table-column
              prop="address"
              label="位置"
              width="150"
            />
            <el-table-column
              prop="alarmTime"
              label="报警时间"
              width="170"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="data-update-box">
      <span>数据更新时间:</span>
      <span>{{ state.dataUpdateTime }}</span>
    </div>
    <div class="map-container" id="situationMonitoringMap"></div>
    <Transition name="fade">
      <div class="alarm-popup" v-if="state.showPopup">
        <div class="alarm-head">
          <div class="head-icon"></div>
          <div class="head-title">警情信息</div>
          <div class="close-icon" @click="fadePopup">✖</div>
        </div>
        <div class="alarm-img-box">
          <img :src="state.popupInfo.picAddress" alt="" />
          <div class="expang-icon" @click="showExpandImg">
            <img :src="expand" alt="" />
          </div>
          <el-button
            type="primary"
            class="video-btn"
            v-show="state.popupInfo.videoUrl"
            @click="showAlarmVideo"
            >查看视频</el-button
          >
        </div>
        <div class="alarm-type-box">
          <span class="alarm-type-label">事件类型</span>
          <span class="alarm-type">{{ state.popupInfo.alarmTypeName }}</span>
        </div>
        <div class="alarm-position-box">
          <span class="alarm-position-label">发生位置</span>
          <span class="alarm-position">{{
            state.popupInfo.alarmPosition
          }}</span>
        </div>
        <div class="alarm-time-box">
          <span class="alarm-time-label">报警时间</span>
          <span class="alarm-time">{{ state.popupInfo.alarmTime }}</span>
        </div>
      </div>
    </Transition>
    <div>
      <el-dialog
        v-model="state.expandImg"
        width="auto"
        destroy-on-close
        align-center
        title="图片"
      >
        <div class="pic-dialog">
          <div class="img-content">
            <img :src="state.popupInfo.picAddress" alt="" />
          </div>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        v-model="state.expandVideo"
        width="auto"
        destroy-on-close
        align-center
        title="视频"
        @close="closeVideo"
      >
        <div class="video-dialog">
          <div class="video-content">
            <div class="video-container" v-if="state.popupInfo.videoUrl">
              <div class="video" id="video-player"></div>
              <div class="close" @click="closeVideoPlayer">
                <Close />
              </div>
              <!-- <video ref="videoPlayer" controls>
                <source :src="state.popupInfo.videoUrl" type="video/mp4" />
              </video> -->
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  nextTick,
  getCurrentInstance,
  onActivated,
  onBeforeUnmount,
  onDeactivated,
  onMounted,
  reactive,
  ref,
  h,
  onUnmounted,
} from "vue";
const { proxy } = getCurrentInstance();
import { ElMessage, ElMessageBox } from "element-plus";
import GeneralChart from "@/components/chart/generalChart.vue";
import MultipleLine from "@/components/chart/chartOptions/line/multipleLine";
import GapPie from "@/components/chart/chartOptions/pie/gapPie";
import LineBase from "@/components/chart/chartOptions/line/base";
import titleComp from "./title.vue";
import { wgs84togcj02 } from "@/utils/toolUtils.js";
import MapInit from "@/utils/mineMap/MapInit.js";
import MapMarker from "@/utils/mineMap/mapMarker.js";
import Timer from "@/utils/timerClass.js";
import { deepClone } from "@/utils/toolUtils";
// 引入模拟数据

// 引入图片
import device from "@/assets/img/liveData/mapPin.png";
import warn from "@/assets/img/liveData/mapPinHL.png";
import expand from "@/assets/img/liveData/expand.png";
import alarmIcon from "@/assets/img/liveData/alarmIcon.png";
import picAddress from "@/assets/img/liveData/alarm.png";

import Player from "xgplayer";
import FlvPlugin from "xgplayer-flv";
import "xgplayer/dist/index.min.css";

/* ====================================声明变量================================= */

const state = reactive({
  congruentPoint: [], // 聚合点数据
  eventType: [],
  alarmTypeValue: null,
  deviceMap: {
    lamp: 6,
    camera: 1,
    allInOne: 2,
    deviceBox: 7,
  },
  showPopup: false,
  popupInfo: {
    picAddress: null,
    alarmTypeName: null,
    alarmTime: null,
    alarmPosition: null,
    videoUrl: null,
  },
  expandImg: false,
  realTimeMetricsData: [
    {
      id: 1,
      title: "监控点位总数",
      color: "#3282FA",
      num: null,
    },
    {
      id: 2,
      title: "今日报警总数",
      color: "#EB992F",
      num: null,
    },
    {
      id: 3,
      title: "设备在线数/总数",
      color: "#3DC3CC",
      totalNum: null,
      num: null,
    },
  ],
  todayAlarmTypeNum: [],
  alarmTotalNumRank: [],
  todayAlarmNum: {
    data: [],
    xaxis: [],
  },
  lastWeekAlarmNum: {
    data: [],
    xaxis: [],
  },
  eventList: [],
  eventTotalList: [],
  mapImgsList: [
    {
      src: device,
      id: "device",
    },
    {
      src: warn,
      id: "warn",
    },
  ],
  realAlarmTimer: null,
  allMeticsTimer: null,
  videoPlayer: null,
  maxLength: 20,
  dataUpdateTime: ""
});
// 地图对象
const mapObject = {
  darkMapObj: null,
  congruentPoint: {
    type: "FeatureCollection",
    features: [],
  },
};
const alarmTypePieOption = computed(() => {
  return new GapPie(state.todayAlarmTypeNum, {
    titleName: "",
    legendDetailShow: false,
    customImg: alarmIcon
  });
});
const daliyAlarmLineOption = computed(() => {
  return new LineBase({
    yAxisName: "报警数",
    dataZoomShow: false,
    lineColor: "#68FFFB",
    xaxis: state.todayAlarmNum.xaxis,
    data: state.todayAlarmNum.data,
  });
});
const lastWeekAlarmLineOption = computed(() => {
  return new LineBase({
    yAxisName: "报警数",
    dataZoomShow: false,
    lineColor: "#FFD44E",
    xaxis: state.lastWeekAlarmNum.xaxis,
    data: state.lastWeekAlarmNum.data,
  });
});

/* =====================================自定义方法================================= */
// 初始化地图
const initMap = () => {
  return new Promise((resolve, reject) => {
    mapObject.darkMapObj = new MapInit("situationMonitoringMap", {
      center: [114.889094, 40.7689], // 地图初始化中心点
    });
    mapObject.darkMapObj.loadMapImgs(state.mapImgsList);
    let time = setInterval(function () {
      if (mapObject.darkMapObj && mapObject.darkMapObj.isStyleLoaded()) {
        clearInterval(time);
        resolve();
      }
    }, 100);
  });
};
// 添加设备点标记以及聚合态
const addClusterAndMarker = (mapObj, congruentData) => {
  if (mapObj.getSource("poiPointCluster")) {
    mapObj.removeSource("poiPointCluster");
  }
  mapObj.addSource("poiPointCluster", {
    type: "geojson",
    data: congruentData,
    cluster: true,
    clusterMaxZoom: 15, //最大聚合zoom级别
    clusterRadius: 30, // 聚合半径，单位：像素
  });
  if (mapObj.getLayer("unclustered-points")) {
    mapObj.removeLayer("unclustered-points");
  }
  //添加非聚合图层
  mapObj.addLayer({
    id: "unclustered-points",
    type: "symbol",
    source: "poiPointCluster",
    filter: ["!has", "point_count"],
    layout: {
      "icon-image": "device",
      "icon-size": 0.4,
    },
  });

  //添加聚合图层
  var clusterColors = [
    [1000, "rgba(80, 160, 255, 0.8)", "rgba(171, 211, 255, 0.8)"],
    [100, "rgba(80, 160, 255, 0.8)", "rgba(171, 211, 255, 0.8)"],
    [0, "rgba(80, 160, 255, 0.8)", "rgba(171, 211, 255, 0.8)"],
  ];
  clusterColors.forEach(function (color, i) {
    if (mapObj.getLayer("point-cluster-" + i)) {
      mapObj.removeLayer("point-cluster-" + i);
    }
    mapObj.addLayer({
      id: "point-cluster-" + i,
      type: "circle",
      source: "poiPointCluster",
      paint: {
        "circle-color": color[1],
        "circle-radius": 15,
        "circle-stroke-width": 3, // 圆的边框宽度，值为数值，默认为0
        "circle-stroke-color": color[2], // 圆的边框颜色，默认值为"#000000"
      },
      filter:
        i === 0
          ? [">=", "point_count", color[0]]
          : [
              "all",
              [">=", "point_count", color[0]],
              ["<", "point_count", clusterColors[i - 1][0]],
            ],
    });
  });

  if (mapObj.getLayer("point-cluster-count")) {
    mapObj.removeLayer("point-cluster-count");
  }
  //添加数量图层
  mapObj.addLayer({
    id: "point-cluster-count",
    type: "symbol", // 标识图层
    source: "poiPointCluster",
    layout: {
      "text-field": "{point_count}", // 文本内容，值是字符串，可加“{}”显示数据properties中对应字段
      "text-size": 12, // 文字大小，值为数值，单位为像素（px），默认值为10
    },
    paint: {
      "text-color": "rgba(255, 255, 255, 1)", // 文本颜色，默认值为"#000000"，"text-field"必须有值才有效
    },
    filter: ["has", "point_count"],
  });
};
const getPopupInfo = (row) => {
  state.popupInfo.picAddress = row.picAddress || null;
  state.popupInfo.alarmTypeName = row.alarmTypeName || null;
  state.popupInfo.alarmTime = row.alarmTime || null;
  state.popupInfo.alarmPosition = row.address || null;
  state.popupInfo.videoUrl = null;
  if (row.deviceId)
    getVideoUrlByDeviceId(row.deviceId).then((res) => {
      state.popupInfo.videoUrl = res || null;
    });
};

// 模拟实时报警事件推送
const mockGetEventAlarmByRealTime = () => {
  let data = [];
  let num = Math.floor(Math.random() * 10) + 1;
  if (num == 5) {
    data.push(
      {
        id: "8",
        alarmTypeName: "抛洒物",
        alarmType: 4,
        longitude: 114.927342,
        latitude: 40.749657,
        address: "胜利路-盛华大街",
        alarmTime: new Date().toTimeString(),
        picAddress: picAddress,
        deviceId: "44011500001318000401",
        videoUrl:
          "http://10.100.35.149:21003/rtp/monitor_38d4b7c03ef0748c7d6ee41a33dcf94c_rtsp.live.flv?uuid=d5cd9ae97589c64caa1a3c46579537eb",
      },
      {
        id: "10",
        alarmTypeName: "大雨",
        alarmType: 6,
        longitude: 114.893069,
        latitude: 40.760507,
        address: "胜利路-裕华大街",
        alarmTime: new Date().toTimeString(),
        picAddress: picAddress,
        deviceId: "44011500001318000401",
        videoUrl:
          "http://10.100.35.149:21003/rtp/monitor_38d4b7c03ef0748c7d6ee41a33dcf94c_rtsp.live.flv?uuid=d5cd9ae97589c64caa1a3c46579537eb",
      }
    );
  } else if (num == 3) {
    data.push(
      {
        id: "11",
        alarmTypeName: "路面损坏",
        alarmType: 6,
        longitude: 114.893069,
        latitude: 40.760507,
        address: "胜利路-裕华大街",
        alarmTime: new Date().toTimeString(),
        picAddress: picAddress,
        deviceId: "44011500001318000401",
        videoUrl:
          "http://10.100.35.149:21003/rtp/monitor_38d4b7c03ef0748c7d6ee41a33dcf94c_rtsp.live.flv?uuid=d5cd9ae97589c64caa1a3c46579537eb",
      },
      {
        id: "12",
        alarmTypeName: "团雾",
        alarmType: 4,
        longitude: 114.927342,
        latitude: 40.749657,
        address: "胜利路-盛华大街",
        alarmTime: new Date().toTimeString(),
        picAddress: picAddress,
        deviceId: "44011500001318000401",
        videoUrl:
          "http://10.100.35.149:21003/rtp/monitor_38d4b7c03ef0748c7d6ee41a33dcf94c_rtsp.live.flv?uuid=d5cd9ae97589c64caa1a3c46579537eb",
      }
    );
  } else {
    data = [];
  }
  return data;
};

// 添加报警图标
const addAlarmMakers = (alarmArr) => {
  for (let i = 0; i < alarmArr.length; i++) {
    mapObject.darkMapObj.flyTo({
      center: [alarmArr[i].longitude, alarmArr[i].latitude],
      duration: 2000,
    });
    let durationMaker = new MapMarker(mapObject.darkMapObj, {
      lnglat: [alarmArr[i].longitude, alarmArr[i].latitude],
      duration: 1000 * 60 * 5, // 毫秒
      width: "35px",
      height: "38px",
      url: "url(/ivam/mapPinHL.png)",
    });
  }
};
const getUpdateTime = () => {
  let today = new Date();
  state.dataUpdateTime = today.toLocaleString();
};
/* =====================================事件方法================================= */
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.flashFlag) {
    return "warning-row";
  } else {
    return "";
  }
};
const getIndex = (index) => {
  return index < 9 ? "0" + (index + 1) : index + 1;
};
const showAlarmVideo = () => {
  state.expandVideo = true;
  nextTick(() => {
    let div = document.getElementById("video-player");
    let width = parseInt(div.style.width);
    let height = parseInt(div.style.height);
    if (FlvPlugin.isSupported()) {
      // 第一步
      state.videoPlayer = new Player({
        id: "video-player",
        autoplay: true,
        autoplayMuted: true,
        plugins: [FlvPlugin],
        controls: true, //控制栏全部关闭
        width: width,
        height: height,
        url: state.popupInfo.videoUrl,
        flv: {
          retryCount: 3, // 重试 3 次，默认值
          retryDelay: 1000, // 每次重试间隔 1 秒，默认值
          loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
        },
      });
    } else {
      console.log("您的浏览器不支持视频");
    }
  });
};
const closeVideo = () => {
  state.videoPlayer && state.videoPlayer.destroy();
  state.popupInfo.videoUrl = null;
};
const showExpandImg = () => {
  state.expandImg = true;
};
const selectRow = (row) => {
  state.showPopup = true;
  getPopupInfo(row);
};
const fadePopup = () => {
  state.showPopup = false;
  getPopupInfo({});
};
const changeSelectAlarmType = (val) => {
  state.eventList = val
    ? state.eventTotalList.filter(
        (item) => item.alarmType == state.alarmTypeValue
      )
    : state.eventTotalList;
};
/* =====================================接口方法================================= */
// 获取实时指标概览
const getRealtimeIndicators = async () => {
  const res = await proxy.$http.getFun("overview/realtime/indicators");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取今日报警类型概览
const getTodayAlarmTypeCount = async () => {
  const res = await proxy.$http.getFun("overview/alarmType/today");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取报警总数排行
const getAlarmTypeTotalCountRank = async () => {
  const res = await proxy.$http.getFun("overview/alarm/rank");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取今日报警情况
const getTodayAlarmNum = async () => {
  const res = await proxy.$http.getFun("overview/alarm/today");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取近七日报警情况
const getLastWeekAlarmNum = async () => {
  const res = await proxy.$http.getFun("overview/alarm/week");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取事件列表数据
const getEventList = async (param) => {
  const res = await proxy.$http.getWithUrl("overview/event/list", param);
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
//  获取设备列表信息
const getDeviceList = async () => {
  const res = await proxy.$http.postWithBody("device/query", {
    reviewStatus: 1,
    deviceType: null,
    onlineStatus: null,
  });
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取事件类型列表
const getEventTypeList = async () => {
  const res = await proxy.$http.getFun("alarm/type");
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 获取视频播放地址
const getVideoUrlByDeviceId = async (deviceId) => {
  const res = await proxy.$http.getWithUrl("overview/video/url", {
    deviceId: deviceId,
  });
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
/* =====================================钩子函数================================= */
onMounted(() => {
  initMap().then(() => {
    getDeviceList().then((res) => {
      mapObject.congruentPoint.features = res.list.map((deviceItem) => {
        return {
          geometry: {
            name: deviceItem.deviceTypeName,
            type: "Point",
            coordinates: [+deviceItem.longitude, +deviceItem.latitude],
          },
          type: "Feature",
          properties: {
            lon: +deviceItem.longitude,
            lat: +deviceItem.latitude,
            name: deviceItem.deviceTypeName,
            code: deviceItem.deviceId,
          },
        };
      });
      addClusterAndMarker(mapObject.darkMapObj, mapObject.congruentPoint);
    });
  });
  getEventTypeList().then((res) => {
    state.eventType = res;
  });
  getEventList({ id: null }).then((res) => {
    state.eventTotalList = res.slice(0, 20);
    state.eventList = res.slice(0, 20);
  });
  state.allMeticsTimer = new Timer(() => {
    getRealtimeIndicators().then((res) => {
      state.realTimeMetricsData.forEach((item) => {
        switch (item.id) {
          case 1:
            item.num = res.monitorPointCount;
            break;
          case 2:
            item.num = res.alarmCountToday;
            break;
          case 3:
            item.num = res.onlineCount;
            item.totalNum = res.deviceCount;
            break;
          default:
            break;
        }
      });
    });
    getTodayAlarmTypeCount().then((res) => {
      state.todayAlarmTypeNum = res.data;
    });
    getAlarmTypeTotalCountRank().then((res) => {
      state.alarmTotalNumRank = res.slice(0, 20);
    });
    getTodayAlarmNum().then((res) => {
      state.todayAlarmNum.data = res.data;
      state.todayAlarmNum.xaxis = res.xaxis;
    });
    getLastWeekAlarmNum().then((res) => {
      state.lastWeekAlarmNum.data = res.data;
      state.lastWeekAlarmNum.xaxis = res.xaxis;
    });
    // 
    getUpdateTime();
  }, 1000 * 60 * 5);
  state.allMeticsTimer.start();
  state.realAlarmTimer = new Timer(() => {
    // state.eventList.forEach((item) => {
    //   if (item.flashFlag) {
    //     item.flashFlag = false;
    //   }
    // });
    // state.eventTotalList.forEach((item) => {
    //   if (item.flashFlag) {
    //     item.flashFlag = false;
    //   }
    // });
    // let alarm = mockGetEventAlarmByRealTime();
    // if (alarm.length == 0) {
    //   return;
    // }
    // if (state.eventTotalList.length + alarm.length > state.maxLength) {
    //   let spliceIndex = state.maxLength - alarm.length;
    //   spliceIndex = spliceIndex > 0 ? spliceIndex : 0;
    //   state.eventTotalList.splice(spliceIndex);
    // }
    // state.eventTotalList.unshift(...deepClone(alarm));
    // if (state.eventList.length + alarm.length > state.maxLength) {
    //   let spliceIndex = state.maxLength - alarm.length;
    //   spliceIndex = spliceIndex > 0 ? spliceIndex : 0;
    //   state.eventList.splice(spliceIndex);
    // }
    // alarm[0].flashFlag = true;
    // state.eventList.unshift(...alarm);
    // getPopupInfo(alarm[0]);
    // addAlarmMakers(alarm);

    // 每次请求时把闪烁清除
    state.eventTotalList.forEach((item) => {
      if (item.flashFlag) {
        item.flashFlag = false;
      }
    });
    state.eventList.forEach((item) => {
      if (item.flashFlag) {
        item.flashFlag = false;
      }
    });
    getEventList({ id: state.alarmTypeValue }).then((res) => {
      if (res.length == 0) {
        return;
      }
      state.showPopup = true;
      if (state.eventTotalList.length + res.length > state.maxLength) {
        let spliceIndex = state.maxLength - res.length;
        spliceIndex = spliceIndex > 0 ? spliceIndex : 0;
        state.eventTotalList.splice(spliceIndex);
      }
      state.eventTotalList.unshift(...deepClone(res));
      if (state.eventList.length + res.length > state.maxLength) {
        let spliceIndex = state.maxLength - res.length;
        spliceIndex = spliceIndex > 0 ? spliceIndex : 0;
        state.eventList.splice(spliceIndex);
      }
      res[0].flashFlag = true;
      state.eventList.unshift(...res);
      getPopupInfo(res[0]);
      addAlarmMakers(res);
    });
  }, 1000 * 5);
  state.realAlarmTimer.start();
});
onUnmounted(() => {
  state.realAlarmTimer && state.realAlarmTimer.pause();
  state.allMeticsTimer && state.allMeticsTimer.pause();
});
</script>

<style scoped lang="scss">
.main-container {
  background-color: #000102;
  padding: 0 !important;
  overflow: visible !important;
  #situationMonitoringMap {
    background-color: #0f1c38;
    height: 100%;
    width: 100%;
    z-index: 1;
  }
  .left-sidebar {
    width: pxTvw(480);
    backdrop-filter: blur(6px);
    height: calc(100vh - #{pxTvh(56)});
    padding: 0 pxTvw(16);
    position: absolute;
    left: 0;
    z-index: 2;
    background-color: rgba(26, 35, 61, 0.8);
    & > .real-Metrics-box {
      margin-top: pxTvh(16);
      & > .real-box {
        display: flex;
        height: pxTvh(70);
        margin: pxTvh(24) pxTvw(8);
        justify-content: space-around;
        align-items: center;
        & > .metrics-item {
          height: 100%;
          display: flex;
          align-items: center;
          & > .split-line {
            height: 100%;
            width: pxTvw(1);
            margin-right: pxTvw(32);
            background: rgba(108, 129, 171, 0.3);
          }
          & > .metrics-name-num {
            height: 100%;
            & > .metrics-name-icon {
              height: calc(50% - #{pxTvh(4)});
              display: flex;
              align-items: center;
            }
            & > .metrics-num-unit {
              height: calc(50% - #{pxTvh(4)});
              margin-top: pxTvh(8);
              display: flex;
              align-items: flex-end;
              & > .metrics-num {
                font-family: DIN Alternate, DIN Alternate, sans-serif;
                font-weight: bold;
                @include computed_font(26);
                color: #ffffff;
              }
              & > .metrics-split {
                font-family: DIN Alternate, DIN Alternate, sans-serif;
                font-weight: bold;
                @include computed_font(26);
                color: #ffffff;
                margin: 0 pxTvw(5);
              }
              & > .metrics-total-num {
                font-family: DIN Alternate, DIN Alternate, sans-serif;
                font-weight: bold;
                @include computed_font(26);
                color: #94a3ad;
              }
              & > .metrics-unit {
                font-family: PingFang SC, PingFang SC, sans-serif;
                font-weight: 400;
                @include computed_font(12);
                color: #b1b6c2;
                margin-left: pxTvw(4);
                margin-bottom: pxTvh(5);
              }
            }
          }
          .metrics-icon {
            width: pxTvw(6);
            height: pxTvw(6);
            display: inline-block;
            border-radius: 50%;
          }
          .metrics-name {
            font-family: PingFang SC, PingFang SC, sans-serif;
            font-weight: 400;
            @include computed_font(12);
            color: #c3ced5;
            margin-left: pxTvw(4);
          }
        }
      }
    }
    & > .alarm-type-box {
      & > .alarm-pie-chart {
        height: pxTvh(300);
        margin: pxTvh(24) auto;
      }
    }
    & > .alarm-rank-box {
      & > .alarm-rank-table-box {
        margin-top: pxTvh(16);
        background: transparent;
        & > .style-table {
          background-color: transparent !important;
          width: 100%;
        }
        .style-table {
          background-color: transparent !important;
          width: 100%;
        }
      }
    }
  }
  .right-sidebar {
    width: pxTvw(480);
    padding: 0 pxTvw(16);
    backdrop-filter: blur(6px);
    height: calc(100vh - #{pxTvh(56)});
    position: absolute;
    right: 0;
    z-index: 2;
    background-color: rgba(26, 35, 61, 0.8);
    & > .daliy-alarm-box {
      margin-top: pxTvh(16);
      & > .daliy-alarm-line-chart {
        height: pxTvh(252);
        margin-top: pxTvh(16);
      }
    }
    & > .last-week-alarm-box {
      margin-top: pxTvh(24);
      & > .lastweek-alarm-line-chart {
        height: pxTvh(252);
        margin-top: pxTvh(16);
      }
    }
    & > .alarm-list-box {
      margin-top: pxTvh(24);
      & > .select-box {
        // width: 100px;
        margin-left: auto;
      }
      :deep(.el-select) {
        .el-select__wrapper {
          min-height: pxTvh(28);
        }
      }
      & > .alarm-list-table-box {
        margin-top: pxTvh(16);
      }
      .style-table {
        background-color: transparent !important;
        width: 100%;
      }
      .device-box {
        margin-left: pxTvw(12);
        font-family: PingFang SC, PingFang SC, sans-serif;
        font-weight: 400;
        @include computed_font(14);
        color: rgba(190, 211, 230, 0.8);
        & > .device-code {
          margin-left: pxTvw(10);
        }
      }
      .eventPic {
        width: pxTvw(416);
        height: pxTvh(234);
        border-radius: pxTvw(4);
        margin: pxTvh(5) auto;
      }
      .delete-btn {
        color: #e04f3f;
        cursor: pointer;
      }
    }
  }
  & .data-update-box {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    @include computed_font(14);
    color: #7692ca;
    position:absolute;
    width: fit-content;
    top: pxTvh(-38);
    right: pxTvw(156);
    z-index: 2;
    & > span:nth-child(2) {
      margin-left: pxTvw(10);
    }
  }
  .alarm-popup {
    width: pxTvw(262);
    height: pxTvh(270);
    background: rgba(27, 40, 71, 0.65);
    border-radius: 4px;
    position: absolute;
    left: pxTvw(528);
    backdrop-filter: blur(6px);
    z-index: 2;
    bottom: pxTvh(16);
    & > .alarm-head {
      height: pxTvh(22);
      margin: pxTvh(16) pxTvw(16) 0 pxTvw(16);
      @include elasticFN(flex-start, center);
      & > .head-icon {
        width: pxTvw(4);
        height: pxTvw(10);
        background: #528afe;
      }
      & > .head-title {
        font-family: PingFang SC, PingFang SC, sans-serif;
        font-weight: 400;
        @include computed_font(14);
        color: #dceaff;
        height: pxTvh(16);
        line-height: pxTvh(16);
        margin-left: pxTvw(6);
      }
      & > .close-icon {
        cursor: pointer;
        width: pxTvw(16);
        height: pxTvh(16);
        line-height: pxTvh(16);
        color: #c3cfe3;
        margin-left: auto;
      }
    }
    & > .alarm-img-box {
      height: pxTvh(124);
      margin: pxTvh(8) pxTvw(16) 0 pxTvw(16);
      position: relative;
      & > img {
        width: 100%;
        height: 100%;
      }
      & > .expang-icon {
        cursor: pointer;
        width: pxTvw(15);
        height: pxTvw(15);
        position: absolute;
        right: pxTvw(8);
        bottom: pxTvh(8);
        & > img {
          width: 100%;
          height: 100%;
        }
      }
      & > .video-btn {
        position: absolute;
        top: pxTvh(8);
        right: pxTvw(8);
        padding-left: 11px;
        padding-right: 11px;
      }
    }
    & > .alarm-type-box {
      margin: pxTvh(16) pxTvw(16) 0 pxTvw(16);
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      @include computed_font(12);
      & > .alarm-type-label {
        color: #7692ca;
      }
      & > .alarm-type {
        color: #d3dfff;
        margin-left: pxTvw(8);
      }
    }
    & > .alarm-position-box {
      margin: pxTvh(10) pxTvw(16) 0 pxTvw(16);
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      @include computed_font(12);
      & > .alarm-position-label {
        color: #7692ca;
      }
      & > .alarm-position {
        color: #d3dfff;
        margin-left: pxTvw(8);
      }
    }
    & > .alarm-time-box {
      margin: pxTvh(10) pxTvw(16) 0 pxTvw(16);
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      @include computed_font(12);
      & > .alarm-time-label {
        color: #7692ca;
      }
      & > .alarm-time {
        color: #d3dfff;
        margin-left: pxTvw(8);
      }
    }
  }
  .pic-dialog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .img-content {
      margin-top: pxTvh(24);
      width: pxTvw(1168);
      padding: 0 pxTvh(16) pxTvh(8) pxTvh(16);
      color: rgba(207, 219, 252, 0.8);
      box-sizing: border-box;
      > img {
        width: 100%;
      }
    }
  }
  .video-dialog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    & > .video-content {
      margin-top: pxTvh(24);
      padding: 0 pxTvh(16) pxTvh(8) pxTvh(16);
      color: rgba(207, 219, 252, 0.8);
      box-sizing: border-box;
      & > .video-container {
        width: pxTvw(1280);
        height: pxTvh(820);
        & > .video {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>
<style lang="scss">
.warning-row {
  animation: flash-animation 1s infinite;
  // animation-iteration-count: 5;
}
@keyframes flash-animation {
  0%,
  100% {
    background-color: inherit;
  }
  50% {
    background-color: #2a49a0;
  }
}
.el-table__body tr.current-row > td.el-table__cell {
  background-color: #2a49a0 !important;
}
.cancel-btn {
  background: transparent;
  border: 1px solid #377dff;
  & > span {
    color: #377dff;
  }
}
.cancel-btn:hover {
  background: transparent;
  opacity: 0.5;
  border: 1px solid #377dff;
  & > span {
    color: #377dff;
  }
}
.control {
  .tmap-zoom-control {
    width: 32px;
    height: 64px;
    border-radius: 2px;
    border: 1px solid rgba(40, 62, 125, 0.5);
    background: #1b2d5e;
    .tmap-zoom-spliter {
      width: 32px;
      background: #0e1c3e;
    }
    .tmap-zoom-in {
      .tmap-zoom-in-image {
        display: none;
      }
    }
    .tmap-zoom-out {
      .tmap-zoom-out-image {
        display: none;
      }
    }
    .tmap-zoom-in:before {
      width: 12px;
      height: 12px;
      content: "+";
      position: absolute;
      top: -6px;
      left: 1px;
      color: #a5bbfa;
      font-weight: 500;
      @include computed_font(24);
    }
    .tmap-zoom-out:before {
      width: 12px;
      height: 12px;
      content: "_";
      position: absolute;
      top: -26px;
      left: 1px;
      color: #a5bbfa;
      font-weight: 500;
      @include computed_font(24);
    }
  }
}
</style>